<template>
	<view class="pop-refund-choose-reason">
		<u-popup ref="store_cart_pop" bgColor="#ffffff" :show="show_pop" mode="bottom" :closeOnClickOverlay="true"
			round="30" @close="onclose" @open="onopen">
			<view class="info-modal-wrap">
				<view class="info-modal-inner">
					<view class="modal-head ">
						<view class="title-box">
							选择售后原因
						</view>
					</view>

					<view class="modal-ctx">
						<scroll-view scroll-y scroll-with-animation class="scroll-container">
							<view class="select-wrap">
								<view class="select-list">
									<view class="select-item flex-between" v-for="(item,index) in refund_reasons" :key="index"
										@click="toggleReason(item)">
										<view class="title">
											{{item.title}}
										</view>
										<view class="btn-box flex-center">
											<image v-if="refund_select == item.title" src="@/static/common/radio1.png" mode=""></image>
											<!-- <image v-else src="@/static/common/radio0.png" mode=""></image> -->
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>

					<view class="modal-foot">
						<view class="footer-wrap ">
							<view class="btns">
								<view class="btn flex-center" @click="doConfirm()">
									确定
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				show_pop: true,
				refund_select: ''
			}
		},
		computed: {
			refund_reasons() {
				let str = this.vuex_config.tuihuanReason
				let arr = []
				try {
					arr = JSON.parse(str) || []
				} catch (e) {
					//TODO handle the exception
				}
				return arr
			}
		},
		watch: {

		},
		methods: {
			init() {
				this.show_pop = true;
			},
			onclose() {
				this.show_pop = false;
			},
			onopen() {},
			toggleReason(item) {
				this.refund_select = item.title;
			},
			doConfirm() {
				if (!this.refund_select) {
					this.$alert('请选择售后原因')
					return
				}
				this.$emit('confirm', this.refund_select)
				this.show_pop = false;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.pop-refund-choose-reason {
		position: relative;
		z-index: 1000;
	}


	.info-modal-wrap {
		width: 574rpx;
		width: 660rpx;
		width: 100%;
		position: relative;
		text-align: left;
		padding-bottom: 0;
		// padding-bottom: calc(64rpx + constant(safe-area-inset-bottom));
		// padding-bottom: calc(64rpx + env(safe-area-inset-bottom));

		.info-modal-inner {
			border-radius: 16rpx;
			overflow: hidden;
			width: 100%;
			padding: 0 0;
			padding-bottom: 0;
			min-height: 400rpx;
			background: #FFFFFF;
			background: #F6FAFD;
		}
	}



	.modal-head {

		// border: 1rpx solid #DDDDDD;
		padding-right: 0;

		.title-box {
			padding: 24rpx 40rpx 20rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}
	}


	.modal-ctx {
		width: 100%;
		background: #F5F7F9;
		padding: 24rpx 32rpx;
		min-height: 200rpx;
		padding-bottom: 30rpx;
	}

	.scroll-container {
		max-height: calc(100vh - 600rpx);
		background: #fff;
	}

	.select-list {
		.select-item {
			min-height: 88rpx;
			padding: 12rpx 24rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}

			.btn-box {
				width: 34rpx;
				height: 34rpx;
				border: 1rpx solid #EBEEF5;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.footer-wrap {
		padding: 20rpx;

		.safe-fixed-bottom {
			position: relative;
		}

		.btns {
			.btn {
				flex: 1;
				width: 100%;
				height: 80rpx;
				background: #CB0011;
				border-radius: 40rpx 40rpx 40rpx 40rpx;

				background: #CB0011;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>